<template>
  <view class="box-wrapper">
    <view class="top-wrapper" v-show="!hasLogin">
      <view class="login-wrapper" @tap="toLogin">
        <image src="../../static/tabs/默认头像.jpg">
        </image>
        <text style="">立即登录</text>

      </view>
      <view style="margin-right: 24upx;margin-top: 100upx;display: flex;flex-direction: row;align-items: center;">
        <text style="color: gray;">
          主页
        </text>
        <image src="../../static/images/right-icon.png" style="width: 40upx;height: 40upx;"></image>

      </view>
    </view>


    <view class="top-wrapper" v-show="hasLogin">
      <view class="login-wrapper" click="toLogin">
        <image :src="userInfo.headPortrait">
        </image>
        <text style="">{{ userInfo.account }}</text>
      </view>
      <view style="margin-right: 24upx;margin-top: 100upx;display: flex;flex-direction: row;align-items: center;">
        <text style="color: gray;" @click="toUserInfo">
          主页
        </text>
        <image src="../../static/images/right-icon.png" style="width: 40upx;height: 40upx;"></image>

      </view>
    </view>

    <view class="browse_box">
      <view
          style="display: flex;flex-direction: row;justify-content: space-between;background-color: #ffffff;margin:20upx;height: 100upx;border-radius: 20upx;align-items: center;">
        <text style="font-weight: bold;margin-left: 12upx;">浏览历史</text>
        <view style="display: flex;flex-direction: row;align-items: center;" @click="toUserBrowse">
          <text style="color: gray;">
            更多
          </text>
          <image src="../../static/images/right-icon.png" style="width: 40upx;height: 40upx;margin-right: 12upx;">
          </image>
        </view>
      </view>

      <view
          style="display: flex;flex-direction: row;align-items: center;margin-left: 16upx;margin-right: 16upx;justify-content: start;gap: 16upx">
        <image v-for="item in browseList" class="browse-image" :src="item.picture" mode="aspectFill" @click="itemClick(item.foodId)"></image>
      </view>
    </view>


    <view class="easy_box">
      <text style="font-weight: bold;margin-left: 12upx;margin-top: 12upx;margin-left: 12upx;">常用功能</text>
      <view class="easy_box_function">

        <view class="common-item" @click="toCollect">
          <image src="../../static/images/collect.png"></image>
          <text>我的收藏</text>
        </view>

        <view class="common-item" @click="toCart">
          <image src="../../static/images/Basket-2.svg"></image>
          <text>我的菜篮</text>
        </view>
        <view class="common-item" @click="toApponitList">
          <image src="../../static/images/customer.png"></image>
          <text>预约订单</text>
        </view>
        <view class="common-item" @click="toRecipes">
          <image src="../../static/images/settings.png" style=""></image>
          <text>随机选菜</text>
        </view>

      </view>
    </view>
    <view class="other_box">
      <u-button style="width: 100%;margin-top: 32rpx" @click="toChefVerify">厨师认证</u-button>
      <u-button style="width: 100%;margin-top: 32rpx" @click="handleLogout">退出登录</u-button>

    </view>

    <view>

    </view>

  </view>
</template>
<script>

import {
  user_info
} from '@/api/auth'

import {
  browse_record
} from '@/api/user'
import {remove} from "@/utils/local";

export default {

  data() {
    return {
      hasLogin: false,
      userInfo: {},
      browseList: [],

    };
  },
  onLoad() {

    this.getUserInfo();
    this.getUserBrowseRecord()
  },
  onShow() {
    this.getUserInfo();
    this.getUserBrowseRecord()
  },
  methods: {
    toChefVerify() {
      uni.navigateTo({
        url: '../chefVerify/chefVerify',
      });
    },
    toCart() {
      uni.navigateTo({
        url: '../cart/cart',
      });
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            remove("token")
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }
        }
      });
    },
    toApponitList() {
      uni.navigateTo({
        url: '../appointment/appointment',
      });
    },
    toUserInfo() {
      uni.navigateTo({
        url: '../userInfo/userInfo',
      });
    },
    toRecipes() {
      uni.navigateTo({
        url: '../lottery/lottery',
      });
    },

    toUserBrowse() {
      uni.navigateTo({
        url: '../browseList/browseList',
      });
    },
    toCollect() {
      uni.navigateTo({
        url: '../collect/collect',
      });
    },
    toLogin() {
      uni.navigateTo({
        url: '../login/login',
      });
    },
    getUserInfo() {
      user_info().then(res => {
        if (res.code === '200') {
          console.log(res)
          this.userInfo = res.data
          this.hasLogin = true
        }
      })
    },
    getUserBrowseRecord() {
      browse_record({}).then(res => {

        this.browseList = res.data.map(item => {
          return item
        }).slice(0,4)

      })
    },

    bindLogout() {
      this.logout();
      if (this.forcedLogin) {
        uni.reLaunch({
          url: '../login/login',
        });
      }
    },
    //用户点击订单类型
    toOrderType(index) {
      uni.showToast({
        title: this.orderTypeLise[index].name
      });
    },
    //用户点击列表项
    toPage(list_i, li_i) {
      uni.showToast({
        title: this.severList[list_i][li_i].name
      }),
          uni.navigateTo({
            url: this.severList[list_i][li_i].url
          })
    },
    itemClick(foodId) {

      uni.navigateTo({
        url: '/pages/fooddetail/fooddetail?foodId=' + foodId
      })
    },

  }
}
</script>

<style lang="scss">

.browse_box {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 16upx;
  margin: 16upx;
  padding-bottom: 16upx;
}

.easy_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  margin: 16upx;
  border-radius: 16upx;
  align-items: flex-start;
  padding: 16upx;
  gap: 32upx;

  .easy_box_function {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16upx;
    justify-content: space-between;
    width: 100%;
  }
}

.other_box{
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 16upx;
  margin: 16upx;
  padding: 16upx;
}

.box-wrapper {
  background-color: #f4f4f4;
  height: 100vh;
}

.browse-image {
  border-radius: 24upx;
  margin-left: 12upx;
  width: 150upx;
  height: 150upx;
}

.top-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 300upx;
  background: linear-gradient(to bottom, #E9A06F, #e8e4ab);
}

.login-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 24upx;
  margin-top: 100upx;

  image {
    width: 140upx;
    height: 140upx;
    border: 4upx solid #ffffff;
    border-radius: 70upx;
  }

  text {
    font-size: 48upx;
    font-weight: bold;
    color: white;
    margin-left: 16upx;
  }
}

.common-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  image {
    width: 60upx;
    height: 60upx;

  }

  text {
    margin-top: 12upx;
    font-size: 26upx;
    margin-bottom: 12upx;
  }
}
</style>